<template>
    <ul v-show="searching" class="search-list">
        <li v-for="(index, item) in items" class="com-border-bottom">
            <a @click='toMsgList(item.team_id, item.project_id ,item.role_id,item.name, item.unread_msg_count, item.number)' class="touch">
                <img class="logo" v-bind:src="item.logo" alt="">
                <div class="info">
                    <div class="title_box">                        
                        <span class="out_project" v-if="item.out_project == 1">外部</span>
                        <h2 v-html="item.nameWithStyle" style="display:inline-block"></h2>
                    </div>
                    <p class="p2" v-if="item.out_project == 1">
                        所属企业：{{item.pro_name}}
                    </p>
                    <p class="p2" v-else>
                        <!-- <span><i class="icon icon-1 bg_sprite"></i>{{item.number}}人</span>
                        <span><i class="icon icon-2 bg_sprite"></i>{{item.pro_name | strEllipsis}}</span> -->                   
                        负责人：{{item.manager}}
                    </p>
                </div>
            </a>
        </li>
    </ul>
    <div v-show="!searching" class="mod-empty new_mod-empty3">
     <!--    <div class="icon icon_4"></div>
        <p class="tip_2">项目名称/ID</p> -->
        <div class="search_tip">你可以搜索</div>
        <div class="searchName">
            <img src="../../static/imgs/icons/icon_10.png" class="searchName_img searchProjectid_img">
            <p class="searchName_tip">项目ID</p>
        </div>
        <div class="line"></div>
        <div class="searchPhone">
            <img src="../../static/imgs/icons/icon_11.png" class="searchPhone_img searchProjectname_img">
            <p class="searchPhone_tip">项目名称</p>
        </div>
    </div>
    <div class="page empty-page" v-show="noData">
        <div class="mod-empty new_mod-empty3">
            <div class="icon icon_4"></div>
            <!-- <p class="tip">未搜索到{{keyword}}相关项目</p> -->
            <p class="tip">什么都没有搜到耶</p>
        </div>
    </div>
    <div v-show="loading">
      <div class="weui-mask"></div>
      <div class="weui-toast">
          <i class="weui-loading weui-icon_toast"></i>
          <p class="weui-toast__content">数据加载中</p>
      </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import userCenterApi from 'clientApi/userCenterApi'
import widget from 'gapi/widget'
    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        filters : {
            strEllipsis : function(str) {
                if (str.length > 10) {
                    return str.substring(0, 10) + '...'
                } else {
                    return str;
                }
            }
        },
        data: function(){
            return{
                items: [],
                status: '',
                keyword : '',
                loading: false,
                searching: false,
                noData : false,
                userId : ''
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                userCenterApi.getUserInfo(function(info){
                    if(info){
                        this.userId = info.userId
                    }
                })

            },
            
            toMsgList (teamId, projectId, roleId, projectName, unReadMsg, memberCount){
              let encodeStr = encodeURIComponent(`projectName=${projectName}&teamId=${teamId}&projectId=${projectId}&roleId=${roleId}&unreadmsg=${unReadMsg}&memberCount=${memberCount}&user_id=${this.userId}`)
                location.href = `dmsaas://ProjectDetail?urdData=${encodeStr}`
            }

        },
        created(){

            this.init();

        },
        ready() {
            const getSearchResult = (listData, keyword) => {
                // alert(JSON.stringify(listData))
                this.keyword = keyword;

                if (listData&&listData.length) {

                    this.noData = false;
                } else {
                    this.noData = true;
                }
                //todo 关键字高亮

                if (keyword){
                    var reg = new RegExp(keyword)
                    listData.forEach((item) => {
                        if (item.name.length > 10) {
                            item.name = item.name.substring(0, 10) + '...'
                        }
                        if(item.hide_manager_name == 1){
                            let managerLength = item.manager.length
                            let changeName = item.manager.substring(1,managerLength)
                            item.manager = item.manager.replace(changeName,'**')
                        }
                        item.nameWithStyle = item.name.replace(reg, function(e) {
                            return `<span class="keyword">${e}</span>`
                        })
                    })
                    this.items = listData
                    this.searching = true

                    if (listData&&listData.length) {

                        this.noData = false;
                    } else {
                        this.noData = true;
                    }

                    // widget.toast(123)
                } else {
                    // widget.toast(1231323)
                    this.searching = false
                    this.noData = false;
                }
            }
            window.getSearchResult = getSearchResult
        }
    }


</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/project.css"></style>
